<template>
	<view>
		<view class="submit">
			<view class="submit-chat">
				<view class="btn-img">
					<image :src="inputBtn" @tap="changeBtn"></image>
				</view>
				<textarea auto-height="true" class="chat-send btn" :class="{displaynone:isRecord}" @input="inputs" v-model="msg" @focus="changeMsg"></textarea>
				<view class="record btn" :class="{displaynone:!isRecord}">按住说话</view>
				<view class="btn-img">
					<image src="@/static/images/submit/bq.png"  @tap="showEmoji"></image>
				</view>
				<view class="btn-img">
					<image src="@/static/images/submit/tj.png"></image>
				</view>
			</view>
			<view class="emoji" :class="{displaynone:!isEmoji}">
				<!-- 发送按钮 -->
				<view class="emoji-send">
					<view class="emoji-send-del">
						<image src="@/static/images/submit/back.png" @tap="sendDel"></image>
					</view>
					<view class="emoji-send-btn" @tap="sendBtn">发送</view>
				</view>
				<emoji @emotion='emotion' :height="260"></emoji>
			</view>
		</view>
	</view>
</template>

<script>
	import emoji from '@/components/emoji/emoji.vue'
	export default {
		name:"submit",
		data() {
			return {
				isRecord:false,		//是否显示录音
				inputBtn:'../../static/images/submit/yy.png', //键盘与语言切换的图片
				isEmoji:false,  	//是否显示表情
				msg:'',				//消息
			};
		},
		components:{
			emoji,
		},
		methods:{
			//获取模块高度
			getSubmitHeight:function(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.submit').boundingClientRect(data =>{
					// console.log("得到布局位置信息" + JSON.stringify(data));
					// console.log("节点离页面顶部的距离为" + data.top);
							this.$emit('heights',data.height);
				}).exec();
			},
			//切换文字与录音按钮
			changeBtn:function(){
				if(this.isRecord){
					this.isRecord = !this.isRecord;
					this.inputBtn = '../../static/images/submit/yy.png';
				}else{
					this.isRecord = !this.isRecord;
					this.inputBtn = '../../static/images/submit/jp.png';
				}
			},
			//显示表情
			showEmoji:function(){
				this.isEmoji = !this.isEmoji;
				setTimeout(()=>{
					this.getSubmitHeight();
				},10);
				
			},
			//文字发送
			inputs:function(e){
				let chatValue = e.detail.value; //获取键盘输入的值
				let enter = chatValue.indexOf('\n');  //获取回车键之前的值
				if(enter !=-1 && chatValue.length>1){
					//如果输入的值不为空 就建立联系，把值传递出去
					this.$emit('inputs',this.msg);
					//每次回车后将原来输入框内的值清空，为了防止延迟清空这里用到延时函数
					setTimeout(()=>{
						this.msg = '';
					},0);
				}
			},
			//接收表情
			emotion:function(e){
				// console.log(e);
				// 把选中的表情放到输入框
				this.msg = this.msg + e;
			},
			//发送按钮
			sendBtn:function(){
				if(this.msg.length>0){
					//如果输入的值不为空 就建立联系，把值传递出去
					this.$emit('inputs',this.msg);
					//每次点击发送后将原来输入框内的值清空，为了防止延迟清空这里用到延时函数
					setTimeout(()=>{
						this.msg = '';
					},0);
				}
			},
			//删除/退格按钮
			sendDel:function(){
				if(this.msg.length>0){
					this.msg = this.msg.substring(0,this.msg.length-1);
				}
				
			},
			//表情输入完聚焦后自动关闭表情页面，
			changeMsg:function(e){
				this.isEmoji = false;
				setTimeout(()=>{
					this.getSubmitHeight();
				},11)
			},
		}
	}
</script>

<style lang="scss">
.submit{
	background-color: rgba(244,244,244,0.96);
	border-top: 1px solid $uni-border-color;
	width: 100%;
	// height: 100rpx;
	position: fixed;
	bottom: 0;
	z-index: 100;
	padding-bottom: env(safe-area-inset-bottom);
}
.displaynone{
		display:none ;
	}
.submit-chat{
	width: 100%;
	// height: 100rpx;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	padding:14rpx;
	image{
		width: 56rpx;
		height: 56rpx;
		margin: 0 10rpx;
		flex:auto;
	}
	.btn{
		flex: auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		max-height: 160rpx;
		margin: 0 10rpx;
	}
	
	.chat-send{
		line-height: 43rpx;
	}
	.record{
		line-height: 43rpx;
		text-align: center;
		font-size: $uni-font-size-lg;
		color: $uni-text-color-grey;
	}
	
}
.emoji{
		width: 100%;
		height: 460rpx;
		background-color: rgba(236,237,238,1);
		box-shadow: 0 -1rpx 0 0 rgba(0,0,0,0.1);
		.emoji-send{
			width: 280rpx;
			height: 104rpx;
			padding-top: 24rpx;
			// background-color: #999;
			background-color: rgba(236,237,238,0.9);
			position: fixed;
			bottom: 0;
			right: 0;
			display: flex;
			.emoji-send-btn{
				flex: 1;
				margin: 0 32rpx 0 20rpx;
				height: 80rpx;
				background-color: rgba(255,228,49,1);
				font-size: 32rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius:12rpx ;
			}
			.emoji-send-del{
				flex: 1;
				margin-left:24rpx ;
				height: 76rpx;
				padding-top: 4rpx;
				background-color: #fff;
				font-size: 32rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius:12rpx ;
				image{
					width: 42rpx;
					height: 32rpx;
				}
			}
		}
	}
	
</style>